<script setup lang="ts">

import { EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { ExcutePlan, RoundInfo } from '@/models/execute/ExecutePlan';
import { onMounted, reactive, ref, nextTick, getCurrentInstance } from 'vue';
import WisdomRecmStrategyDebug from '../components/debug/WisdomRecmStrategyDebug.vue';
import WisdomMoneyStrategyV90Debug from '../components/debug/WisdomMoneyStrategyV90Debug.vue';
import { useRoute } from 'vue-router';
import { compression, decompress } from '@/utils/compress';
import { PickerOption, showConfirmDialog, showToast } from 'vant';
import { WisdomRecmStrategy } from '@/models/execute/recmStrategy/WisdomRecmStrategy';
import { BossRabbitMoneyStrategy } from '@/models/execute/moneyStrategy/BossRabitMoneyStrategy';
import { ExcutePlanWithSubPlan } from '@/models/execute/ExcutePlanWithSubPlan';
import { ArrayStrategy } from '@/models/execute/recmStrategy/ArrayStrategy';
import { IPlan } from '@/models/execute/IExecutePlan';
import { FixedStrategy } from '@/models/execute/recmStrategy/FixedStrategy';
import { BossMoneyStrategyV2 } from '@/models/execute/moneyStrategy/BossMoneyStrategyV2';
import { BossReverseMoneyStrategy } from '@/models/execute/moneyStrategy/BossReverseMoneyStrategy';


defineOptions({
    components: { WisdomRecmStrategyDebug, WisdomMoneyStrategyV90Debug }
})

const BOSS_RECM_STRATEGY = "BossRecmStrategyV5_2"

let route = useRoute();
const debug = ref(false);
debug.value = route.query.debug ? true : false;
const showModalDlg = ref(false);


let roundInfo = reactive<RoundInfo>(new RoundInfo());
let game = reactive(new ExcutePlanWithSubPlan());
let extPlan = ref(new ExcutePlan());

let tempPlans: ExcutePlan[] = [];
let extRecordPlan = reactive(tempPlans);
let extReversePlan = ref(new ExcutePlan())
let extReverse2Plan = ref(new ExcutePlan());

const initData = () => {

    roundInfo = reactive<RoundInfo>(new RoundInfo());
    let newGame = new ExcutePlan();
    Object.assign(game, newGame);
    game.subPlan.splice(0, game.subPlan.length);
    var str = localStorage.getItem(BOSS_RECM_STRATEGY);
    if (str) {
        let st = JSON.parse(str) as EnumBjlResult[][];
        for (let i = 0; i < st.length; i++) {
            let recmArray = st[i]
            let pl = buildPlan(recmArray);
            game.subPlan.push(pl);
        }
    }

    resultInputCompoenent.value?.initData();
    resultComponent.value?.initData();
    predictComponent.value?.initData();
    reverseComponent.value?.initData();
    reverse2Component.value?.initData();

    snapShot.splice(0, snapShot.length);

    var oneExtPlan = reactive(new ExcutePlan());
    oneExtPlan.recmStrategy = [new FixedStrategy({ reverse: false })];
    oneExtPlan.moneyStrategy = [new BossMoneyStrategyV2("", {
        reverse: false,
        failCount: 2,
        baseMoney: 10,
        winStep: -1,
        failStep: 1,
        prevMoney: 10,
        maxMoney: 999999999,
        reverseCount:2
    })];
    oneExtPlan.multiple = 1;
    oneExtPlan.toResult(new RoundInfo());
    //extPlan.copyValue(oneExtPlan);
    //extPlan = oneExtPlan;
    extPlan.value = reactive(oneExtPlan);

    extRecordPlan.splice(0, extRecordPlan.length);


    let recordPlan2 = new ExcutePlan();
    recordPlan2.recmStrategy = [new FixedStrategy({ reverse: false })];
    recordPlan2.moneyStrategy = [new BossMoneyStrategyV2("", {
        reverse: false,
        failCount: 2,
        baseMoney: 10,
        winStep: 1,
        failStep: 0,
        prevMoney: 0,
        maxMoney: 0
    })];
    recordPlan2.toResult(new RoundInfo());
    extRecordPlan.push(recordPlan2);

    let rplan = new ExcutePlan();
    rplan.recmStrategy = [new FixedStrategy({ reverse: false })];
    rplan.moneyStrategy = [new BossMoneyStrategyV2("", {
        reverse: false,
        failCount: 2,
        baseMoney: 10,
        winStep: -1,
        failStep: 1,
        prevMoney: 10,
        maxMoney: 0,
        reverseCount: 1
    })];
    rplan.toResult(new RoundInfo());
    extReversePlan.value = rplan;

    let r2plan = new ExcutePlan();
    r2plan.recmStrategy = [new FixedStrategy({ reverse: false })];
    r2plan.moneyStrategy = [new BossMoneyStrategyV2("", {
        reverse: false,
        failCount: 2,
        baseMoney: 10,
        winStep: -1,
        failStep: 1,
        prevMoney: 10,
        maxMoney: 0,
        reverseCount:1
    })];
    r2plan.toResult(new RoundInfo());
    extReverse2Plan.value = r2plan;
};

const buildPlan = (fixedRecm: EnumBjlResult[]) => {
    let plan = new ExcutePlan();
    plan.recmStrategy = [new ArrayStrategy({ betArray: fixedRecm })];
    plan.moneyStrategy = [new BossRabbitMoneyStrategy("", {
        baseMoney: 10,
        winStep: 1,
        failStep: 0,
        prevMoney: 0
    })];
    return plan;
}

onMounted(() => {
    initData();

    nextTick(() => {
        showPredict.value = ['showPredict', 'showResult', 'showReverse', 'showReverse2'];

        collapseRecm.value = (game.recmStrategy.map(x => x.strategyName));
        collapseMoney.value = (game.moneyStrategy.map(x => x.strategyName));
    })
    setTimeout(() => showPredict.value = [], 1000);
});
const isAuto = ref(false);
const setResult = (result: EnumBjlResult) => {
    roundInfo.results.push(result)
    roundInfo.currentResult = result;
    resultInputCompoenent.value.setResult(result);

    if (extReverse2Plan.value.recmInfo.recmV != EnumBjlResult.U) {
        reverse2Component.value?.setResult(result == extReverse2Plan.value.recmInfo.recmV ? 1 : 0);
    }
    else {
        reverse2Component.value?.record();
    }

    if (extReversePlan.value.recmInfo.recmV != EnumBjlResult.U) {
        reverseComponent.value?.setResult(result == extReversePlan.value.recmInfo.recmV ? 1 : 0);
    }
    else {
        reverseComponent.value?.record();
    }

    if (game.recmInfo.recmV != EnumBjlResult.U) {
        resultComponent.value?.setResult(result == game.recmInfo.recmV ? 1 : 0);
    }
    else {
        resultComponent.value?.record();
    }

    if (extPlan.value.recmInfo.recmV != EnumBjlResult.U) {
        predictComponent.value?.setResult(result == extPlan.value.recmInfo.recmV ? 1 : 0);
    }
    else {
        predictComponent.value?.record();
    }


    game.setResult(roundInfo, game.recmInfo, game.multiple, game.waterRate, game.fuliRate);
    game.userRecmInfo.recmV = game.toResult(roundInfo);
    roundInfo.userRecm = game.userRecmInfo.recmV;
    let [recmV, recmMoney] = game.toMoney(roundInfo, game.recmInfo, game.userRecmInfo, game.baseMoney);
    if (recmV != EnumBjlResult.U) {
        game.recmInfo.betCount++;
    }
    roundInfo.userRecm = recmV;
    game.recmInfo.recmV = recmV;
    game.recmInfo.recmMoney = recmMoney;


    //////////////////////////////////////////////////////////////////////////////////////////////////
    let plRound = Object.assign({}, roundInfo);
    plRound.userRecm = game.recmInfo.recmV;
    extPlan.value.setResult(plRound, extPlan.value.recmInfo, extPlan.value.multiple, extPlan.value.waterRate, extPlan.value.fuliRate);
    extPlan.value.userRecmInfo.recmV = game.recmInfo.recmV;
    extPlan.value.userRecmInfo.recmMoney = game.recmInfo.recmMoney;

    let [precmV, precmMoney] = extPlan.value.toMoney(plRound, extPlan.value.recmInfo, extPlan.value.userRecmInfo, extPlan.value.baseMoney);
    extPlan.value.recmInfo.recmV = precmV;
    extPlan.value.recmInfo.recmMoney = precmMoney;
    //////////////////////////////////////////////////////////////////////////////////////////////////
    let reverseRound = Object.assign({}, roundInfo);
    reverseRound.userRecm = extPlan.value.recmInfo.recmV;
    extReversePlan.value.setResult(reverseRound, extReversePlan.value.recmInfo, extReversePlan.value.multiple,
        extReversePlan.value.waterRate, extReversePlan.value.fuliRate);
    extReversePlan.value.userRecmInfo.recmV = extPlan.value.recmInfo.recmV;
    extReversePlan.value.userRecmInfo.recmMoney = extPlan.value.recmInfo.recmMoney;

    let [rprecmV, rprecmMoney] = extReversePlan.value.toMoney(plRound, extReversePlan.value.recmInfo,
        extReversePlan.value.userRecmInfo, extReversePlan.value.baseMoney);
    extReversePlan.value.recmInfo.recmV = rprecmV;
    extReversePlan.value.recmInfo.recmMoney = rprecmMoney;
    //////////////////////////////////////////////////////////////////////////////////////////////////
    let reverse2Round = Object.assign({}, roundInfo);
    reverse2Round.userRecm = extReversePlan.value.recmInfo.recmV;
    extReverse2Plan.value.setResult(reverse2Round, extReverse2Plan.value.recmInfo, extReverse2Plan.value.multiple,
        extReverse2Plan.value.waterRate, extReverse2Plan.value.fuliRate);
    extReverse2Plan.value.userRecmInfo.recmV = extReversePlan.value.recmInfo.recmV;
    extReverse2Plan.value.userRecmInfo.recmMoney = extReversePlan.value.recmInfo.recmMoney;

    let [r2precmV, r2precmMoney] = extReverse2Plan.value.toMoney(reverse2Round, extReverse2Plan.value.recmInfo,
        extReverse2Plan.value.userRecmInfo, extReverse2Plan.value.baseMoney);
    extReverse2Plan.value.recmInfo.recmV = r2precmV;
    extReverse2Plan.value.recmInfo.recmMoney = r2precmMoney;
    //////////////////////////////////////////////////////////////////////////////////////////////////
    let win = game.recmInfo.summaryInfo.winMoney - game.recmInfo.summaryInfo.failMoney - game.recmInfo.summaryInfo.waterMoney;
    if (isAuto.value) {
        if (win < 0) {
            let v = parseInt((-win / 10000).toString());
            game.multiple = 1 + v / 10;
        }
        else {
            game.multiple = 1;
        }
    }

    extRecordPlan.forEach((spl, idx) => {
        let nRoundInfo = Object.assign(new RoundInfo(), roundInfo);
        nRoundInfo.userRecm = extPlan.value.recmInfo.recmV;

        spl.setResult(nRoundInfo, spl.recmInfo, spl.multiple, spl.waterRate, spl.fuliRate);

        spl.userRecmInfo.recmV = spl.toResult(nRoundInfo);
        if (idx == 0 && extPlan.value.recmInfo.summaryInfo.lfail >= 2 && nRoundInfo.userRecm != EnumBjlResult.U) {
            spl.userRecmInfo.recmV = nRoundInfo.userRecm == EnumBjlResult.Z ? EnumBjlResult.X : EnumBjlResult.Z;
        }
        nRoundInfo.userRecm = spl.userRecmInfo.recmV;
        let sbRecmV: EnumBjlResult;
        let sbRecmMoney = 0;

        [sbRecmV, sbRecmMoney] = spl.toMoney(nRoundInfo, spl.recmInfo, spl.userRecmInfo, spl.baseMoney);
        spl.recmInfo.recmV = sbRecmV;
        spl.recmInfo.recmMoney = sbRecmMoney;
    });



    record();

};
const showPredict = ref(['showPredict', 'showResult']);
const resultInputCompoenent = ref<any>(null);
const predictComponent = ref<any>(null);
const resultComponent = ref<any>(null);
const reverseComponent = ref<any>(null);
const reverse2Component = ref<any>(null);

const debugTabs = ref('recmStrategy');
const collapseRecm = ref(game.recmStrategy.map(x => x.strategyName));
const collapseMoney = ref(game.moneyStrategy.map(x => x.strategyName));

const snapShot: string[] = [];

type SnapObject = {
    game: ExcutePlan,
    roundInfo: RoundInfo,
    extPlan: ExcutePlan,
    extRecordPlan: ExcutePlan[],
    extReversePlan: ExcutePlan,
    extReverse2Plan: ExcutePlan
}
const record = () => {
    snapShot.push(compression({
        game, roundInfo, extPlan: extPlan.value,
        extRecordPlan,
        extReversePlan: extReversePlan.value,
        extReverse2Plan: extReverse2Plan.value
    }));
};

const resetGame = () => {
    showConfirmDialog({
        title: '提示',
        message: '确认重新开始吗？',
        width: '80%'
    }).then(() => {
        // on close
        initData();
    });
};

const revert = () => {

    resultInputCompoenent.value.revert();
    let revertRound = snapShot.pop();
    if (revertRound) {
        let revertObj = decompress(revertRound) as SnapObject;
        let game = revertObj.game;

        resultComponent.value?.revert();
        predictComponent.value?.revert();
        reverseComponent.value?.revert();
        reverse2Component.value?.revert();
    }

    let top = snapShot[snapShot.length - 1];
    if (top) {
        let topObj = decompress(top) as SnapObject;

        if (topObj.roundInfo) roundInfo.copyValue(topObj.roundInfo);
        if (topObj.game) game.copyValue(topObj.game);

        if (topObj.extPlan) {
            extPlan.value.copyValue(topObj.extPlan);
        }
        if (topObj.extReversePlan) {
            extReversePlan.value.copyValue(topObj.extReversePlan);
        }

        if (topObj.extReverse2Plan) {
            extReverse2Plan.value.copyValue(topObj.extReverse2Plan);
        }

        if (topObj.extRecordPlan) {
            for (let i = 0; i < extRecordPlan.length; i++) {
                let item = extRecordPlan[i];
                if (item) {
                    item.copyValue(topObj.extRecordPlan[i]);
                }

            }
        }

    }
    else {
        initData();
    }

};
const nextTable = () => {

    showConfirmDialog({
        title: '提示',
        message: '确认换桌吗',
        width: '80%'
    }).then(() => {
        // on close
        resultInputCompoenent.value.nextTable();
        resultComponent.value?.nextTable();
        reverseComponent.value?.nextTable();
        reverse2Component.value?.nextTable();
        predictComponent.value?.nextTable();
        roundInfo.changeCount++;

        // game.recmInfo.recmV = EnumBjlResult.U;
        // game.userRecmInfo.recmV = EnumBjlResult.U;
        // game.recmStrategy.forEach(item => {
        //     if (item instanceof WisdomRecmStrategy) {
        //         let strategy = (item as WisdomRecmStrategy);
        //         if (strategy) {
        //             strategy.subPlan.forEach(pl => pl.resetPlan());
        //             strategy.selectPlan = [];
        //         }
        //         //(item as WisdomRecmStrategy)?.subPlan.forEach(pl => pl.resetPlanSummaryInfo());
        //     }
        // });
        // game.moneyStrategy.forEach(item => {
        //     item.resetRecm();
        // });
        //snapShot.push(compression({ game, roundInfo, extPlan: extPlan.value, extRecordPlan }));
        record();
    });

}

const multiplePickerShow = ref(false);
const showMultiplePicker = () => {
    multiplePickerShow.value = true;
};
const multipleArray = reactive([.5, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
const pickerColumns: PickerOption[] = [];
const pickerColumns2: PickerOption[] = [];
//pickerColumns.push({ text: "智能", value: 999 });
for (let i = 0; i < multipleArray.length; i++) {
    pickerColumns.push({ text: multipleArray[i], value: multipleArray[i] });
}
for (let i = 1; i <= 100; i++) {
    pickerColumns2.push({ text: i, value: i });
}

const selectMultiple = ({ selectedOptions }: PickerOption) => {
    let v = parseFloat(selectedOptions[0].value?.toString() ?? "");
    if (isNaN(v)) extReverse2Plan.value.multiple = 1;
    else extReverse2Plan.value.multiple = v;

    if (extReverse2Plan.value.multiple >= 999) {
        isAuto.value = true;
        extReverse2Plan.value.multiple = 1;
    }
    else {
        isAuto.value = false;
    }

    multipleSelect.slice(0, multipleSelect.length);
    multipleSelect.push(game.multiple);
    multiplePickerShow.value = false;
};
const multipleSelect = reactive([game.multiple]);;

const multiplePickerShow2 = ref(false);
let setGame: IPlan | null = null;
const showSetMultiple = (pl: IPlan) => {
    setGame = pl;
    multiplePickerShow2.value = true;
};
const selectMultiple2 = ({ selectedOptions }: PickerOption) => {
    let v = parseFloat(selectedOptions[0].value?.toString() ?? "");
    if (isNaN(v)) v = 1;
    if (setGame) {
        setGame.multiple = v;
    }
    showMoney();
    multiplePickerShow2.value = false;
};
const switchChange = () => {
    showMoney();
}
const showMoney = () => {
    let [recmV, recmMoney] = game.showMoney();

    game.recmInfo.recmV = recmV;
    game.recmInfo.recmMoney = recmMoney;
}

class BossRecm {
    recmArray: EnumBjlResult[] = [];
}

let opt = reactive(new BossRecm());

const addResult = (result: EnumBjlResult) => {
    opt.recmArray.push(result);
};

const removeItem = (ele: EnumBjlResult, index: number) => {
    //option.betArray.splice(index, 1);
    opt.recmArray.splice(index, 1);
};
const addRecmOption = (action: string) => {
    if (action == "confirm") {
        if (opt.recmArray.length > 0) {
            let plan = buildPlan(opt.recmArray);
            game.subPlan.push(plan);
            opt = reactive(new BossRecm());
            saveSubPlan();
            return false;
        }
    }
};
const saveSubPlan = () => {

    var recmArray = game.subPlan.map(t => (t.recmStrategy[0] as ArrayStrategy).getRecmArray())
    localStorage.setItem(BOSS_RECM_STRATEGY, JSON.stringify(recmArray));
};
const removePlan = (idx: number) => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认移除计划' + (idx + 1) + "吗？",
    })
        .then(() => {
            // on confirm
            game.subPlan.splice(idx, 1);
            saveSubPlan();
        })
        .catch(() => {
            // on cancel
        });
};
</script>
<template>

    <van-dialog v-model:show="showModalDlg" title="定义方案" show-cancel-button cancel-button-text="关闭"
        confirm-button-text="添加" :before-close="addRecmOption" @cancel="showModalDlg = false"
        style="font-size:14px;padding:10px;width:100%;">
        <van-row class="lbl">
            规则列表
        </van-row>
        <div style="max-height: 150px;overflow: auto;">
            <van-row v-for="(ele, idx) in game.subPlan" class="table-item" :key="idx">
                <van-col :span="6" class="lbl">计划{{ idx + 1 }}</van-col>
                <van-col :span="15">
                    <span v-for="(r, ix) in (ele.recmStrategy[0] as ArrayStrategy).getRecmArray()"
                        :class="['BR', ((r == EnumBjlResult.Z) ? 'Z' : 'X')]"></span>
                </van-col>
                <van-col :span="3">
                    <van-icon name="delete-o" @click="removePlan(idx)" />
                </van-col>
            </van-row>
        </div>
        <van-field name="followCount" label="条件" label-align="top" placeholder="请点击右侧对应按钮">
            <template #input>
                <van-row>
                    <van-col :span="24">
                        <span v-for="(ele, index) in opt.recmArray"
                            :class="['BR', ((ele == EnumBjlResult.Z) ? 'Z' : 'X')]"
                            @click="removeItem(ele, index)"></span>
                    </van-col>
                </van-row>
            </template>
            <template #button>
                <van-row>
                    <van-col :span="10">
                        <van-button type="primary" class="btn X" @click="addResult(EnumBjlResult.X)" />
                    </van-col>
                    <van-col :span="4"></van-col>
                    <van-col :span="10">
                        <van-button type="primary" class="btn Z" @click="addResult(EnumBjlResult.Z)" />
                    </van-col>

                </van-row>
            </template>
        </van-field>
    </van-dialog>

    <van-row>
        <van-col :offset="1" :span="23">
            <BjlInput ref="resultInputCompoenent" />
        </van-col>
    </van-row>

    <van-divider :margin="24" style="margin:0;" />

    <van-row class="recm-item">
        <van-col v-if="extReverse2Plan.recmInfo.recmV == EnumBjlResult.X" class="recm x" :span="12">
            {{ parseInt((extReverse2Plan.recmInfo.recmMoney * extReverse2Plan.multiple).toFixed(0)) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>

        <van-col :span="12" v-if="extReverse2Plan.recmInfo.recmV == EnumBjlResult.Z" class="recm z">
            {{ parseInt((extReverse2Plan.recmInfo.recmMoney * extReverse2Plan.multiple).toFixed(0)) }}
        </van-col>
        <van-col v-else :span="12" class="recm"></van-col>
    </van-row>

    <van-row>
        <van-col :span="24">
            <van-collapse v-model="showPredict">
                <van-collapse-item name="showReverse2">
                    <template #title>
                        <van-row class="recm-item" style="text-align: center;">
                            <van-col :span="6">
                                <van-button type="primary" @click.stop="() => showModalDlg = true"
                                    size="small">定义方案</van-button>
                            </van-col>
                            <van-col :span="6">
                                <span style="color:red;">{{ extReversePlan.recmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ extReversePlan.recmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="6">
                                <span :style="[
                                    extReversePlan.recmInfo.summaryInfo.winCount > extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : extReversePlan.recmInfo.summaryInfo.winCount < extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ extReversePlan.recmInfo.summaryInfo.winCount -
                                    extReversePlan.recmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="6">

                                <span
                                    v-if="(extReversePlan.recmInfo.summaryInfo.winCount + extReversePlan.recmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        extReversePlan.recmInfo.summaryInfo.winCount > extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : extReversePlan.recmInfo.summaryInfo.winCount < extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (extReversePlan.recmInfo.summaryInfo.winCount /
                                        (extReversePlan.recmInfo.summaryInfo.winCount +
                                            extReversePlan.recmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>
                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="reverse2Component" labelName="运势路" />
                </van-collapse-item>

                <van-collapse-item name="showReverse">
                    <template #title>
                        <van-row class="recm-item" style="text-align: center;">
                            <van-col offset="2" :span="4">
                                <span v-if="extReversePlan.recmInfo.recmV == EnumBjlResult.Z" class="recms"
                                    style="background-color: red;">{{
                                        extReversePlan.recmInfo.recmMoney }}</span>
                                <span v-else-if="extReversePlan.recmInfo.recmV == EnumBjlResult.X" class="recms"
                                    style="background-color: blue;">{{
                                        extReversePlan.recmInfo.recmMoney }}</span>
                                <span v-else></span>
                            </van-col>
                            <van-col :span="6">
                                <span style="color:red;">{{ extReversePlan.recmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ extReversePlan.recmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="6">
                                <span :style="[
                                    extReversePlan.recmInfo.summaryInfo.winCount > extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : extReversePlan.recmInfo.summaryInfo.winCount < extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ extReversePlan.recmInfo.summaryInfo.winCount -
                                    extReversePlan.recmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="6">

                                <span
                                    v-if="(extReversePlan.recmInfo.summaryInfo.winCount + extReversePlan.recmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        extReversePlan.recmInfo.summaryInfo.winCount > extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : extReversePlan.recmInfo.summaryInfo.winCount < extReversePlan.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (extReversePlan.recmInfo.summaryInfo.winCount /
                                        (extReversePlan.recmInfo.summaryInfo.winCount +
                                            extReversePlan.recmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>
                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="reverseComponent" labelName="运势路" />
                </van-collapse-item>
                <van-collapse-item name="showPredict">
                    <template #title>
                        <van-row class="recm-item" style="text-align: center;">
                            <van-col offset="2" :span="4">
                                <span v-if="extPlan.recmInfo.recmV == EnumBjlResult.Z" class="recms"
                                    style="background-color: red;">{{
                                        extPlan.recmInfo.recmMoney }}</span>
                                <span v-else-if="extPlan.recmInfo.recmV == EnumBjlResult.X" class="recms"
                                    style="background-color: blue;">{{
                                        extPlan.recmInfo.recmMoney }}</span>
                                <span v-else></span>
                            </van-col>
                            <van-col :span="6">
                                <span style="color:red;">{{ extPlan.recmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ extPlan.recmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="6">
                                <span :style="[
                                    extPlan.recmInfo.summaryInfo.winCount > extPlan.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : extPlan.recmInfo.summaryInfo.winCount < extPlan.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ extPlan.recmInfo.summaryInfo.winCount - extPlan.recmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="6">

                                <span
                                    v-if="(extPlan.recmInfo.summaryInfo.winCount + extPlan.recmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        extPlan.recmInfo.summaryInfo.winCount > extPlan.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : extPlan.recmInfo.summaryInfo.winCount < extPlan.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (extPlan.recmInfo.summaryInfo.winCount / (extPlan.recmInfo.summaryInfo.winCount
                                        +
                                        extPlan.recmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>

                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="predictComponent" labelName="神预测" />
                </van-collapse-item>

                <van-collapse-item name="showResult">
                    <template #title>
                        <van-row class="recm-item" style="text-align: center;">

                            <van-col offset="2" :span="4">
                                <span v-if="game.recmInfo.recmV == EnumBjlResult.Z" class="recms"
                                    style="background-color: red;">{{
                                        game.recmInfo.recmMoney }}</span>
                                <span v-else-if="game.recmInfo.recmV == EnumBjlResult.X" class="recms"
                                    style="background-color: blue;">{{
                                        game.recmInfo.recmMoney }}</span>
                                <span v-else></span>
                            </van-col>
                            <van-col :span="6">
                                <span style="color:red;">{{ game.recmInfo.summaryInfo.winCount }}</span>
                                -
                                <span style="color:blue;">{{ game.recmInfo.summaryInfo.failCount }}</span>
                            </van-col>
                            <van-col :span="6">
                                <span :style="[
                                    game.recmInfo.summaryInfo.winCount > game.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                        : game.recmInfo.summaryInfo.winCount < game.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                ]">{{ game.recmInfo.summaryInfo.winCount - game.recmInfo.summaryInfo.failCount
                                    }}</span>
                            </van-col>
                            <van-col :span="6">

                                <span
                                    v-if="(game.recmInfo.summaryInfo.winCount + game.recmInfo.summaryInfo.failCount) > 0"
                                    :style="[
                                        game.recmInfo.summaryInfo.winCount > game.recmInfo.summaryInfo.failCount ? { 'color': 'red' }
                                            : game.recmInfo.summaryInfo.winCount < game.recmInfo.summaryInfo.failCount ? { 'color': 'blue' } : ''
                                    ]">
                                    {{ (game.recmInfo.summaryInfo.winCount / (game.recmInfo.summaryInfo.winCount +
                                        game.recmInfo.summaryInfo.failCount)).toFixed(2) }}
                                </span>
                                <span v-else>0.00</span>
                            </van-col>
                        </van-row>
                    </template>
                    <BjlResult ref="resultComponent" labelName="运势路" />
                </van-collapse-item>
            </van-collapse>
        </van-col>
    </van-row>

    <van-row class="recm-item">
        <van-col :span="6" style="color:red;">
            {{ extReverse2Plan.recmInfo.summaryInfo.fuliMoney.toFixed(0) }}
        </van-col>
        <van-col :span="6" style="color:blue;">
            {{ extReverse2Plan.recmInfo.summaryInfo.waterMoney.toFixed(0) }}
        </van-col>
        <van-col :span="6" :style="[
            (extReverse2Plan.recmInfo.summaryInfo.winMoney -
                extReverse2Plan.recmInfo.summaryInfo.failMoney -
                extReverse2Plan.recmInfo.summaryInfo.waterMoney > 0) ? { 'color': 'red' }
                : (extReverse2Plan.recmInfo.summaryInfo.winMoney -
                    extReverse2Plan.recmInfo.summaryInfo.failMoney -
                    extReverse2Plan.recmInfo.summaryInfo.waterMoney < 0) ? { 'color': 'blue' } : ''
        ]">
            {{ (extReverse2Plan.recmInfo.summaryInfo.winMoney -
                extReverse2Plan.recmInfo.summaryInfo.failMoney -
                extReverse2Plan.recmInfo.summaryInfo.waterMoney).toFixed(0) }}
        </van-col>
    </van-row>

    <van-row class="operate">
        <van-col :span="6">
            <van-button class="BSync" @click="revert">撤销</van-button>
        </van-col>
        <van-col :span="6">
            <van-button class="BSync" @click="resetGame">重置</van-button>
        </van-col>
        <van-col :span="6">
            <van-button class="BSync" @click="nextTable">换桌</van-button>
        </van-col>
        <van-col :span="6">
            <van-button style="width:75px" class="BSync" @click="showMultiplePicker">{{ isAuto ? ("智能" +
                (debug ? ("|" + extReverse2Plan.multiple) : "")) :
                extReverse2Plan.multiple
                }}</van-button>
        </van-col>
    </van-row>


    <van-row justify="center" class="recm-item" style="margin:15px;">
        <van-col offset="1" :span="10" class="recm x" @click="setResult(EnumBjlResult.X)">&nbsp;</van-col>
        <van-col offset="1" :span="10" class="recm z" @click="setResult(EnumBjlResult.Z)">&nbsp;</van-col>
    </van-row>

    <van-row v-for="(sbPlan, idx) in extRecordPlan"
        style="text-align: center;margin:15px 0;font-size:16px;height:30px;line-height:30px;">
        <van-col :span="3"></van-col>
        <van-col :span="4">
            <span v-if="sbPlan.recmInfo.recmV == EnumBjlResult.Z"
                style="color:white;background-color: red;width:50px;height:30px;line-height: 30px;display:inline-block;">{{
                    sbPlan.recmInfo.recmMoney
                }}</span>
            <span v-else-if="sbPlan.recmInfo.recmV == EnumBjlResult.X"
                style="color:white;background-color: blue;width:50px;height:30px;line-height: 30px;display:inline-block;">{{
                    sbPlan.recmInfo.recmMoney
                }}</span>
            <span v-else>-</span>
        </van-col>
        <van-col :span="6" :style="[
            (sbPlan.recmInfo.summaryInfo.winMoney
                > sbPlan.recmInfo.summaryInfo.failMoney) ? { 'color': 'red' }
                : (sbPlan.recmInfo.summaryInfo.winMoney
                    < sbPlan.recmInfo.summaryInfo.failMoney) ? { 'color': 'blue' } : ''
        ]">
            {{ sbPlan.recmInfo.summaryInfo.winMoney - sbPlan.recmInfo.summaryInfo.failMoney }}
        </van-col>
        <van-col :span="6">
            <span style="color:red;">{{ sbPlan.recmInfo.summaryInfo.winCount }}</span>
            -
            <span style="color:blue;">{{ sbPlan.recmInfo.summaryInfo.failCount }}</span>
        </van-col>
    </van-row>


    <!-- 底部弹出 -->
    <van-popup v-model:show="multiplePickerShow" position="bottom" :style="{ height: '50%' }">
        <van-picker title="请选择倍率" :columns="pickerColumns" @cancel="multiplePickerShow = false"
            @confirm="selectMultiple" />
    </van-popup>

    <van-popup v-model:show="multiplePickerShow2" position="bottom" :style="{ height: '50%' }">
        <van-picker title="请选择倍率" :columns="pickerColumns2" @cancel="multiplePickerShow2 = false"
            @confirm="selectMultiple2" />
    </van-popup>

    <van-row v-for="(pl, idx) in game.subPlan" style="text-align: center;margin:5px 0;font-size:16px;">
        <van-col :span="1"></van-col>
        <van-col :span="3">
            <van-switch v-model="pl.running" @change="switchChange" size="18px">
                <template #node>
                    <div class="icon-wrapper">
                        <van-icon :name="pl.running ? 'success' : 'cross'" />
                    </div>
                </template>
            </van-switch>
        </van-col>

        <van-col :span="6">
            <span v-if="pl.recmInfo.recmV == EnumBjlResult.Z" style="color:red;">{{ pl.recmInfo.recmMoney }}</span>
            <span v-else-if="pl.recmInfo.recmV == EnumBjlResult.X" style="color:blue;">{{ pl.recmInfo.recmMoney
                }}</span>
            <span v-else>-</span>
        </van-col>
        <van-col :span="6" :style="[
            (pl.recmInfo.summaryInfo.winMoney
                > pl.recmInfo.summaryInfo.failMoney) ? { 'color': 'red' }
                : (pl.recmInfo.summaryInfo.winMoney
                    < pl.recmInfo.summaryInfo.failMoney) ? { 'color': 'blue' } : ''
        ]">
            {{ pl.recmInfo.summaryInfo.winMoney - pl.recmInfo.summaryInfo.failMoney }}
        </van-col>
        <van-col :span="4">
            <van-button style="width:50px" class="BSync" @click="showSetMultiple(pl)">{{ pl.multiple }}</van-button>
        </van-col>
    </van-row>

</template>

<style scoped>
span.z {
    width: 30px;
    height: 30px;
    border-radius: 90px;
    margin: 0 10px;
}

.st {
    font-size: 16px;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.operate {
    text-align: center;
    height: auto;
    margin: 5px 0;
}

.recm-item {
    margin: 5px 0;

    div {
        align-items: center;
        color: coral;
        height: 40px;
        line-height: 40px;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        font-size: 16px;
    }

    .recm {
        border-radius: 0;
        /* line-height: 40px; */
        padding: 5px 30px;
        width: 100%;
        font-size: 24px;
    }



    .recms {
        border-radius: 0;
        /* line-height: 40px; */
        padding: 5px 10px;
        width: 40px;
        font-size: 18px;
        color: white;
    }

    .recm.x {
        color: white;
        background-color: blue;
    }

    .recm.z {
        color: white;
        background-color: red;
    }

    .urecm {
        width: 13px;
        height: 13px;
        border-radius: 90px;
        display: inline-block;

    }

    .urecm.z {
        border: 1px solid red;
    }

    .urecm.x {
        border: 1px solid blue;
    }
}


div.recm {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 90px;
}

div.Z {
    border: 3px solid red;
}

div.X {
    border: 3px solid blue;
}

div.B {
    border: 3px solid rgb(6, 237, 83);
}

.operate button,
.operate_button button {
    font-size: 12px;
    color: white;
    border: none;
    margin: 5px 15px;
    padding: 10px;
}

.BZ {
    background-color: #ae2a2a;
    color: red !important;
}

.BX {
    background-color: #2a71ae;
    color: blue !important;
}

.BSync {
    background-color: coral;
    color: white;
    height: 30px;
    width: 45px;
}

.revert {
    background-color: #c0c0c0;
}

.change {
    background-color: darkgoldenrod;
}

.restart {
    background-color: rgb(244, 0, 252);
}

.changetable {
    background-color: cadetblue;
}

.BR {
    width: 15px;
    height: 15px;
    border-radius: 90px;
    margin: 0 3px;
    display: inline-block;
}

.BR.X {
    border: 1px solid blue;
}

.BR.Z {
    border: 1px solid red;
}

.btn {
    height: 20px;
    width: 30px;
    border: none;
    margin: auto;
}

.btn.X {
    background-color: blue;
}

.btn.Z {
    background-color: red;
}

.table-item {
    min-height: 30px;
}

.icon-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
}

.icon-wrapper .van-icon-success {
    line-height: 20px;
    color: var(--van-blue);
}

.icon-wrapper .van-icon-cross {
    line-height: 20px;
    color: var(--van-gray-5);
}

.short {
    width: 70px;
}
</style>
<style>
.van-toast--text {
    background: rgba(0, 0, 0, 0.7) !important;
}
</style>